import { useEffect, useState } from "react";
import { ChevronRightIcon, ListBulletIcon } from "@radix-ui/react-icons";

import Link from "next/link";
import { useParams } from "next/navigation";
import { useTranslations } from "next-intl";
import { useCustomFetch } from "@/utils/network";

export default function ShowArticle() {
  const [data, setData] = useState<any[]>([]);
  const params = useParams();
  const t = useTranslations("technology");
  async function GetArticle(lang: string) {
    const res = await useCustomFetch(`/article?language=${lang}&title=`);
    setData(res.data ?? []);
  }
  useEffect(() => {
    GetArticle(params.locale as string);
  }, [params]);
  return (
    <div className="bg-white shadow-sm text-black border">
      <div className="flex font-semibold items-center gap-2 p-1 bg-gray-300/40">
        <ListBulletIcon className="font-bule"></ListBulletIcon>
        {t("title")}
      </div>
      <ul>
        {data.map((a, index) => {
          return (
            <li key={index}>
              <Link
                href={`/${params.locale}/technology/${a.ID}`}
                className="flex py-2 items-center cursor-pointer	"
              >
                <ChevronRightIcon
                  style={{ color: "red" }}
                  className="ml-2"
                ></ChevronRightIcon>
                <div className="px-2 text-over text-sm">{a.title}</div>
              </Link>
            </li>
          );
        })}
      </ul>
    </div>
  );
}
